<template>
  <div class="legend-con" v-show="selectShow">
    <div
      v-for="(legend, index) in legendList"
      :key="index"
      class="legend-item"
      @click="btnClick(legend, index)"
    >
      <div class="legend-item-img">
        <img :src="legend.icon" :height="legend.height" :width="legend.width" />
      </div>
      <span>{{ legend.text }}</span>
    </div>
  </div>
</template>

<script>
import Bus from "@/js/EventBus";
export default {
  name: "MapLegend",

  data() {
    return {
      selectShow: true,
      legendList: [
        {
          text: "输水干管",
          icon: require("@/assets/legend/ShuShuiGanGuan.png"),
          width: 21,
          height: 6,
        },
        {
          text: "供水干管",
          icon: require("@/assets/legend/GongShuiGanGuan.png"),
          width: 21,
          height: 6,
        },
        {
          text: "分干管",
          icon: require("@/assets/legend/FenGanGuan.png"),
          width: 21,
          height: 6,
        },
        {
          text: "直分支管",
          icon: require("@/assets/legend/ZhiFenGanGuan.png"),
          width: 21,
          height: 6,
        },
        {
          text: "支管",
          icon: require("@/assets/legend/ZhiGuan.png"),
          width: 21,
          height: 6,
        },
        {
          text: "分支管",
          icon: require("@/assets/legend/FenZhiGuan.png"),
          width: 21,
          height: 6,
        },
        {
          text: "蓄水池监测点",
          icon: require("@/assets/legend/XuShuiChi.png"),
          width: 16,
          height: 16,
        },
        {
          text: "泵站监测点",
          icon: require("@/assets/legend/BengZhan.png"),
          width: 16,
          height: 22,
        },
        {
          text: "分界监测点",
          icon: require("@/assets/legend/FenJie.png"),
          width: 17,
          height: 17,
        },
        {
          text: "非分界监测点",
          icon: require("@/assets/legend/FeiFenJie.png"),
          width: 17,
          height: 17,
        },
        {
          text: "水厂",
          icon: require("@/assets/legend/ShuiChang.png"),
          width: 16,
          height: 16,
        },
        {
          text: "收费站",
          icon: require("@/assets/legend/ShouFeiZhan.png"),
          width: 16,
          height: 16,
        },
      ],
    };
  },
  // computed: {
  //   toolbarshowhide() {
  //     return this.$store.getters.toolbarshowhide;
  //   },
  // },
  // watch: {
  //   toolbarshowhide(newval, oldval) {
  //     this.selectShow = newval;
  //   },
  // },
  mounted() {
    Bus.$on("setToolBarIsShow", (e) => {
      this.selectShow = e;
    });
  },

  methods: {
    openthis() {
      // this.selectShow = !this.selectShow;
    },
  },
};
</script>

<style lang="scss" scoped>
.legend-con {
  position: absolute;
  z-index: 999;
  // left: 395px;
  left: 0;
  bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 180px;
  background-color: rgba(217, 145, 57, 0);
  .legend-item {
    display: flex;
    margin: 4px 0;
    .legend-item-img {
      width: 26px;
      height: 20px;
      display: flex;
      background-color: rgba(255, 123, 234, 0);
      align-items: center;
      margin-left: 20px;
    }
    span {
      font-family: SourceHanSansCN-Medium;
      font-size: 12px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #d0d0d0;
    }
  }
}
</style>
